<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>登录</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="iconfont/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="css/all_css.css" />
		<link rel="stylesheet" type="text/css" href="css/weui/base.css" />
		<link rel="stylesheet" type="text/css" href="lib/weui.css" />
		<link rel="stylesheet" type="text/css" href="css/weui/jquery-weui.css" />
		<style type="text/css">
			#login_main {
				max-width: 640px;
				min-width: 320px;
				width: 100%;
				margin: 0px auto;
				padding-bottom: 55px;
			}
			
			.app_head_left {
				float: left;
				width: 30%;
				padding-left: 6px;
				padding-top: 6px;
			}
			
			.app_head_left a {
				color: #FFFFFF;
				font-size: 1.5em;
				font-weight: bold;
			}
			
			.app_head_mid {
				float: left;
				width: 40%;
				padding-top: 5px;
			}
			
			.app_head_right {
				float: right;
				width: 30%;
				text-align: right;
				padding: 12px;
			}
			
			.app_head_right a {
				color: #FFFFFF;
				font-size: 1.3em;
				font-weight: bold;
				font-family: "黑体";
			}
			
			#app_head_title {
				text-align: center;
				color: #FFFFFF;
				font-size: 1.6em;
				font-family: "宋体";
				font-weight: bold;
			}
			/*----输入框----*/
			
			#login_main input[type=text],
			#login_main input[type=password] {
				width: 100%;
				border: none;
				outline: none;
				height: 100%;
				border-radius: 8px;
				font-size: 1.3em;
				color: #CDCDCD;
				padding-left: 1em;
			}
			
			#login_main input {
				margin: auto;
				width: 94%;
				display: block;
				border: none;
				outline: none;
				height: 3em;
				border-radius: 8px;
				font-size: 1.3em;
				color: #CDCDCD;
				padding-left: 1em;
			}
			/*----按钮----*/
			
			.btnBottom {
				max-width: 640px;
				min-width: 320px;
				margin: 0px auto;
				width: 100%;
				/*position: fixed;*/
				margin-top: 100px;
				text-align: center;
			}
			
			.myLogin {
				font-size: 1.2em;
				width: 40%;
				height: 45px;
				border-radius: 20px;
				display: block;
				background-color: #0070B4;
				text-align: center;
				line-height: 45px;
				color: #FFFFFF;
				font-family: Tahoma, fzltxhk, "\5fae\8f6f\96c5\9ed1";
			}
			
			.mycannotLogin {
				font-size: 1.2em;
				width: 40%;
				height: 45px;
				border-radius: 20px;
				display: block;
				background-color: #DCDCDC;
				text-align: center;
				line-height: 45px;
				color: #FFFFFF;
				font-family: Tahoma, fzltxhk, "\5fae\8f6f\96c5\9ed1";
			}
			
			.tiaozhuan_zhuce {
				display: block;
				float: left;
				width: 30%;
				margin-top: 15px;
				color: #A1A1A1;
			}
			
			.btnBottom a:nth-child(3) {
				margin-left: 20%;
				border-right: 1px solid #DEDEDE;
			}
			
			.btnBottom a:nth-child(4) {
				margin-right: 20%;
			}
			/*----验证提示----*/
			
			.yanzhengtishi {
				color: #FF0000;
				margin-top: 5px;
				text-align: left;
				height: 25px;
				font-size: 14px;
				width: 90%;
				margin: 0 auto;
			}
			
			.wrongB {
				border-color: #FF0000 !important;
			}
			
			.trueB {
				border-color: #0070B4 !important;
			}
			/*----验证码区域----*/
			
			.inputAndPic {
				margin-left: 3%;
				margin-right: 3%;
			}
			
			#yzm {
				width: 65% !important;
				float: left;
				height: 40px;
				border: 1px solid #E9E9E9;
			}
			
			.inputAndBtn {
				width: 94%;
				height: 55px;
				margin-left: 3%;
				margin-right: 3%;
				border: 1px solid #E9E9E9;
				border-radius: 8px;
			}
			
			#loginYzm {
				width: 65% !important;
				height: 100% !important;
				float: left;
				border: none !important;
				outline: none !important;
			}
			
			#my_loginYzm {
				margin-top: 9px;
			}
			
			.primary {
				color: #0070B4 !important !important;
				font-size: 1em;
			}
			
			.login_mid {
				padding-top: 70px;
			}
			
			.weui_dialog_ft .weui_btn_dialog:first-child {
				color: #0070B4;
			}
			
			.weui_dialog_ft .weui_btn_dialog:last-child {
				color: #666666;
			}
			
			footer li a {
				position: relative;
				top: -2px;
			}
			
			footer li p {
				position: relative;
				top: -6px;
			}
			
			.loginZysx {
				float: left;
				margin-top: 80px;
				color: #555555;
				font-weight: bold;
				font-size: 1.1em;
			}
			
			.loginZysx li {
				padding-left: 1em;
				color: #666666;
				font-size: 0.8em;
				font-weight: 100;
				list-style-type: circle !important;
			}
		</style>
	</head>

	<body ontouchstart>
		<div id="login_main">
			<div class="index_head">
				<div class="app_head_left">
					<a href="my.html" class="iconfont">&#xe6d4;</a>
				</div>
				<div class="app_head_mid">
					<p id="app_head_title">帐号管理</p>
				</div>
			</div>
			<div class="login_mid">
				<!--输入手机号-->
				<div class="inputAndBtn" style="margin-top: 20px;">
					<input type="text" name="" id="myphone" placeholder="请输入手机号" />
				</div>
				<p class="yanzhengtishi"></p>
				<!--输入密码-->
				<div class="inputAndBtn">
					<input type="password" name="" id="myPwd" placeholder="请输入密码" />
				</div>
				<p class="yanzhengtishi"></p>
				<!--验证码与发送验证码按钮区域-->
				<div class="inputAndBtn">
					<input type="text" name="" id="loginYzm" placeholder="请输入验证码" />
					<!--<a href="javascript" id="sendYzm" style="display: none;">发送验证码</a>
				<a href="javascript" id="cannotSendYzm">发送验证码</a>-->
					<canvas id="my_loginYzm" class="yzm" onclick="yzmNum()"></canvas>
				</div>
				<p class="yanzhengtishi" id="login_TS"></p>

				<div class="btnBottom">
					<a href="javascript:;" class="myLogin" id="login" style="display: none;">登&nbsp;&nbsp;录</a>
					<a href="javascript:;" class="mycannotLogin" id="cannotlogin">登&nbsp;&nbsp;录</a>
					<a class="tiaozhuan_zhuce" href="register.html">注册账号</a>
					<a class="tiaozhuan_zhuce" href="forgetPwd.html">忘记密码</a>
				</div>
			</div>

			<ul class="loginZysx">
				<li>公众用户直接登录即可</li>
				<li>行业内人员提交报送信息请点击“报送”按钮后登录</li>
				<li>后台管理员请点击“管理员”按钮后登录</li>
			</ul>

			<footer>
				<li>
					<a href="#">
						<div>
							<img src="img/Login/gzIcon_1.png" />
						</div>
						<p style="color: #1296db;">公众</p>
					</a>
				</li>
				<li>
					<a href="login_bs.html">
						<div>
							<img src="img/Login/bsIcon.png" />
						</div>
						<p style="color: #707070;">报送</p>
					</a>
				</li>
				<li>
					<a href="login_ad.html">
						<div>
							<img src="img/Login/gly.png" />
						</div>
						<p style="color: #707070;">管理员</p>
					</a>
				</li>
			</footer>
		</div>

		<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/weui/jquery-weui.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/back_end.js" type="text/javascript" charset="utf-8"></script>
		<script src="libs/crypto-js.js" type="text/javascript" charset="utf-8"></script>
		<script src="libs/aes.js" type="text/javascript" charset="utf-8"></script>
		<script src="libs/pad-zeropadding.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="libs/encryption.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var num0 = 0;
			var num1 = 0;
			var num2 = 0;
			//验证手机号
			$("#myphone").keyup(function() {
				var phone = /^[1][34578][0-9]{9}$/;
				var Input = $(this).parent();
				if(phone.test(this.value)) {
					Input.removeClass("wrongB");
					Input.addClass("trueB");
					Input.next().html("");
					num0 = 1;
				} else {
					Input.removeClass("trueB");
					Input.addClass("wrongB");
					Input.next().html("请先输入正确的手机号码");
					num0 = 0;
				}
				changeBlue();
			});
			//验证自定义密码
			$("#myPwd").keyup(function() {
				var Pwd = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,18}$/;
				var Input = $(this).parent();
				if(Pwd.test(this.value)) {
					Input.removeClass("wrongB");
					Input.addClass("trueB");
					Input.next().html("");
					num1 = 1;
					//					document.getElementById("cannotregister").style.display = "none";
					//					document.getElementById("register").style.display = "block";
				} else {
					Input.removeClass("trueB");
					Input.addClass("wrongB");
					Input.next().html("请输入您的8-18位密码");
					num1 = 0;
				}
				changeBlue();
			});
			var nn;
			window.onload = function() {
				var canvas = document.getElementById("my_loginYzm");
				canvas.width = 100;
				canvas.height = 30;
				var ctx = canvas.getContext("2d");
				ctx.fillStyle = "rgb(0,0,0)";
				ctx.fillRect(0, 0, 100, 30);
				ctx.font = "25px 微软雅黑";
				ctx.fillStyle = getRandomColor();
				yzmNum();
				ctx.fillText(nn, 25, 22);
			}

			function yzmNum() {
				var ran = parseInt(Math.random() * 10000) % 9000 + 1000;
				nn = ran;
				var canvas = document.getElementById("my_loginYzm");
				canvas.width = 100;
				canvas.height = 33;
				var ctx = canvas.getContext("2d");
				ctx.fillStyle = "rgb(0,0,0)";
				ctx.fillRect(0, 0, 100, 33);
				ctx.font = "26px 微软雅黑";
				ctx.fillStyle = getRandomColor();
				ctx.fillText(nn, 22, 26);
				for(var i = 0; i < 10; i++) {
					var w1 = parseInt(Math.random() * 10000) % canvas.width;
					var h1 = parseInt(Math.random() * 10000) % canvas.height;
					ctx.moveTo(w1, h1);
					w1 = w1 = parseInt(Math.random() * 10000) % canvas.width;
					h1 = parseInt(Math.random() * 10000) % canvas.height;
					ctx.lineTo(w1, h1);
					ctx.strokeStyle = getRandomColor();
					ctx.stroke();
				}
				for(var i = 0; i < 100; i++) {
					ctx.beginPath();
					var w1 = parseInt(Math.random() * 10000) % canvas.width;
					var h1 = parseInt(Math.random() * 10000) % canvas.height;
					ctx.moveTo(w1, h1);
					ctx.lineTo(w1 + 1, h1 + 1);
					ctx.strokeStyle = getRandomColor();
					ctx.stroke();

				}
				ctx.fillStyle = "rgba(255,20,0,0.2)";
				ctx.fillRect(0, 0, 100, 33);
			}

			function getRandomColor() {
				var r = parseInt(Math.random() * 10000) % 256;
				var g = parseInt(Math.random() * 10000) % 256;
				var b = parseInt(Math.random() * 10000) % 256;
				return "rgb(" + r + "," + g + "," + b + ")";
			}
			//验证输入的验证码
			$("#loginYzm").keyup(function() {
				var Input = $(this).parent();
				if(this.value == nn) {
					Input.next().html("");
					Input.removeClass("wrongB");
					Input.addClass("trueB");
					num2 = 1;
				} else {
					Input.removeClass("trueB");
					Input.addClass("wrongB");
					Input.next().html("验证码看不清楚？可点击更换");
					num2 = 0;
				}
				changeBlue();
			});

			function changeBlue() {
				var ts = document.getElementById("login_TS");
				ts.innerHTML = "";
				if(num0 == 1 && num1 == 1 && num2 == 1) {
					$("#cannotlogin").css("display", "none");
					$("#login").css("display", "block");
				} else {
					$("#login").css("display", "none");
					$("#cannotlogin").css("display", "block");
				}
				//								console.log(num0 + "--" + num1 + "--" + num2);
			}
			$("#login").click(function() {
				var n1 = $("#myphone").val();
				var n2 = $("#myPwd").val();
				var allData = "USERNAME:" + n1 + ",PASSWORD:" + n2 + ",FLAG:1";
				allData = encrypt(allData);
				if($("#loginYzm").val() == nn) {
					if(window.navigator.onLine == false) {
						$.alert("请检查您的网络设置", "提示");
						//						alert("aa");
					} else {
						//						console.log(window.navigator.onLine);
						$.ajax({
							type: "post",
							url: Url,
							async: false,
							data: {
								"type": "login",
								"DATA": "" + allData + ""
							},
							cache: false,
							dataType: "jsonp", //数据类型为jsonp
							jsonp: "callbackparam", //服务端用于接收callback调用的function名的参数  
							jsonpCallback: "jsonpCallback1",
							success: function(data) {
								console.log(data);
								var ifHYNYH = data.HYNYH;
								if(data.MSG == "成功") {
									if(ifHYNYH == "1") {
										$.alert("您登录的是行业内用户账号，请点击确定后重新登录", "提示", function() {
											window.location.href = "login_bs.html";
										});
									} else {
										if(data.MB == "0") {
											$.modal({
												title: "提示",
												text: "您尚未设置密保问题，如果忘记密码将无法找回",
												buttons: [{
													text: "去设置",
													onClick: function() {
														var username = $("#myphone").val();
														var userJson;
														if(data.HYNYH == "1") {
															var hynPhone = data.PHONE;
															var hynName = data.YHM;
															var hynCompany = data.ZZJG;
															console.log("是行业内用户");
															//行业内用户
															userJson = {
																username: username,
																HYNYH: "1",
																hynPhone: hynPhone,
																hynName: hynName,
																hynCompany: hynCompany
															};
														} else {
															userJson = {
																username: username,
																HYNYH: "0"
															};
														}

														if(!localStorage.userJson) {
															var arr = [userJson];
															//将登录用户名存入浏览器本地存储
															localStorage.userJson = JSON.stringify(arr);
														}
														window.location.href = "findPwd.html";
													}
												}, {
													text: "取消",
													onClick: function() {
														//登录成功
														$.alert("登录成功", function() {
															//点击确认后的回调函数
															var username = $("#myphone").val();
															var userJson;
															if(data.HYNYH == "1") {
																var hynPhone = data.PHONE;
																var hynName = data.YHM;
																var hynCompany = data.ZZJG;
																console.log("是行业内用户");
																//行业内用户
																userJson = {
																	username: username,
																	HYNYH: "1",
																	hynPhone: hynPhone,
																	hynName: hynName,
																	hynCompany: hynCompany
																};
															} else {
																console.log("不是行业内用户");
																userJson = {
																	username: username,
																	HYNYH: "0"
																};
															}
															if(!localStorage.userJson) {
																var arr = [userJson];
																//将登录用户名存入浏览器本地存储
																localStorage.userJson = JSON.stringify(arr);
															}
															//									else if(localStorage.userJson){
															//										
															//									}
															if(localStorage.cxghToLogin) {
																//如果从出行规划页面跳转至登录页，则登录后跳转回出行规划页
																localStorage.removeItem("cxghToLogin");
																window.location.href = "cxgh.html";
															} else {
																window.location.href = "my.html";
															}

														});
													}
												}]
											});
										} else {

											//登录成功
											$.alert("登录成功", function() {
												//点击确认后的回调函数
												var username = $("#myphone").val();
												var userJson;
												if(data.HYNYH == "1") {
													var hynPhone = data.PHONE;
													var hynName = data.YHM;
													var hynCompany = data.ZZJG;
													console.log("是行业内用户");
													//行业内用户
													userJson = {
														username: username,
														HYNYH: "1",
														hynPhone: hynPhone,
														hynName: hynName,
														hynCompany: hynCompany
													};
												} else {
													console.log("不是行业内用户");
													userJson = {
														username: username,
														HYNYH: "0"
													};
												}
												if(!localStorage.userJson) {
													var arr = [userJson];
													//将登录用户名存入浏览器本地存储
													localStorage.userJson = JSON.stringify(arr);
												}
												//									else if(localStorage.userJson){
												//										
												//									}
												if(localStorage.cxghToLogin) {
													//如果从出行规划页面跳转至登录页，则登录后跳转回出行规划页
													localStorage.removeItem("cxghToLogin");
													window.location.href = "cxgh.html";
												} else {
													window.location.href = "my.html";
												}

											});
										}
									}
								} else if(data.MSG == "失败") {
									var ts = document.getElementById("login_TS");
									ts.innerHTML = "手机号或密码输入有误";
									$(".inputAndBtn").removeClass("trueB");
									$("#myPwd").val("");
									$("#login").css("display", "none");
									$("#cannotlogin").css("display", "block");
								}
							},
							error: function(data) {
								$.confirm("服务器忙，请稍后再试", "提示");
							}
						});
					}
				} else {
					console.log("验证码有误");
					var ts = document.getElementById("login_TS");
					ts.innerHTML = "";
					ts.innerHTML = "验证码输入有误";
					$("#loginYzm").parent().removeClass("trueB");
					$("#loginYzm").parent().addClass("wrongB");
				}
			});
		</script>
	</body>

</html>